<template>
    <div>
        <TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
        <div class="container">
            <el-table :data="filterTableData" style="width: 100%">
                <el-table-column align="left">
                    <template #header>
                        <el-row>
                            <el-col :span="6"><div style="padding-top: 5px">场地归属人: </div></el-col>
                            <el-col :span="12"><el-input v-model="search" size="middle" placeholder="请输入合作管理员" /></el-col>
                        </el-row>
                    </template>
                    <template #default="scope">
                        {{ scope.row.c_contacts_name }}
                    </template>
                </el-table-column>
                <el-table-column label="场地数量" prop="f_num" />
                <el-table-column label="眼镜使用数量" prop="total_glass_num" />
            </el-table>
            <!-- <TableCustom :columns="columns" :tableData="tableData" :total="page.total"
                :has-pagination="false"
                :delFunc="handleDelete" :changePage="changePage" :change-page-size="changePageSize" :currentPage="page.page" :pageSize="page.page_size" :editFunc="handleEdit">
                
                <template #header>
                    <el-input v-model="searchPerson" size="small" placeholder="输入管理员" />
                </template>
            </TableCustom> -->
        </div>
        <!-- <el-dialog :title="isEdit ? '编辑' : '新增'" v-model="visible" width="700px" destroy-on-close
            :close-on-click-modal="false" @close="closeDialog">
            <TableEdit :form-data="rowData" :options="options" :edit="isEdit" :update="updateData" />
        </el-dialog> -->
    </div>
</template>

<script setup lang="ts" name="collaborativeAdministrator-marketSubsidies">
import { ref, reactive, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { query_all_cooperaton_user_data } from '@/api';
import { FormOption, FormOptionList } from '@/types/form-option';

const getNowTime = () => {
    return `${new Date().getFullYear()}-${(new Date().getMonth() + 1) > 9 ? (new Date().getMonth() + 1) : '0' + (new Date().getMonth() + 1)}-${new Date().getDate() > 9 ? new Date().getDate() : '0' + new Date().getDate()}`
}
// 查询相关
const query = reactive({
    data_time: [getNowTime(), getNowTime()],
});
const searchOpt = ref<FormOptionList[]>([
    { type: 'daterange', label: '查询时间：', prop: 'data_time', placeholder: '请选择时间范围', format: 'YYYY-MM-DD'},
])
const handleSearch = () => {
    getData();
}
const search = ref('')
const tableData = ref([]);
const filterTableData = computed(() =>
  tableData.value.filter(
    (data) =>
        !search.value ||
      data.c_contacts_name.toLowerCase().includes(search.value.toLowerCase())
    
      
  )
)
const getData = async () => {
    const res = await query_all_cooperaton_user_data({...query})
    tableData.value = res.data
};
getData();

</script>

<style scoped></style>